var vm = new Vue({
    el: '#main-container',
    data: function() {
        return {
            pageInfo: {
                pageNum: 1,
                pageSize: 5
            },
            setting: {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: 'parentId'//根据node节点中的parentId属性来作为pId属性值
                    }
                },
                callback: {
                    // beforeClick:this.beforeClick,
                    onClick: this.onClick,
                    beforeEditName:this.beforeEditName
                },
                edit:{
                    enable: true
                },
                view:{//自定义节点上的元素
                    addHoverDom:this.addHoverDom,
                    removeHoverDom:this.removeHoverDom
                }
            },
            nodes: [],
            treeObj: {},
            params: {
                areaName: '',//默认值，让下拉出现的时候默认被选中
                aid: ''
            }
        }
    },
    methods: {
        selectAll: function (pageNum, pageSize) {
            //查询后台，返回分页数据，更新vue的pageInfo对象
            axios({
                url:`manager/area/selectPage/${pageNum}/${pageSize}`,
                method:'post',
                data:this.params
            }).then(response => {
                // console.log(response.data);
                this.pageInfo = response.data.obj;

            }).catch(function (error) {
                console.log(error);
            })
        },
        selectAreaName:function(){//根据父区域的名查询
            this.params.aid='';//将aid初始化
            this.selectAll(1,this.pageInfo.pageSize);

        },
        toUpdate: function (obj) {


                layer.obj = obj;//返回数据，绑定到layer上，传递给子窗口
                // console.log(layer)
                let index = layer.open({
                    type:2,
                    title:'区域修改',
                    content:'manager/area/toUpdatePage',
                    area:['80%','80%'],
                    end: () => {//将then函数中的this传递到end的回调函数中
                        console.log(".....")
                        //更新失败刷新页面数据
                       if(!layer.success){
                           this.selectAll(1,this.pageInfo.pageSize);
                       }


                    }
                });

        },
        update: function () {


        },
        toDelete: function (id) {

        },
        deleteById: function () {

        },
        save: function () {

        },
        downloadFile:function(){
            //发送请求获取下载文件
            location.href="manager/area/download";
        },
        /**
         * ajax文件上传：
         * 1.通过事件对象获取事件源中的文件对象
         * 2.创建FormData对象，将文件对象放入FormData对象
         * 3.设置ajax的请求header为multipart/form-data，请求方式为post
         * 4.ajax发送请求，传输FormData对象
         */
        uploadFile:function(e){
            console.log(e.target.files[0]);
            let file = e.target.files[0];
            let form = new FormData();
            form.append("file",file);//"file"需要于后台接受参数名一致
            axios({
                url:'manager/area/upload',
                method:'post',
                data:form,
                headers:{'content-type':'multipart/form-data'}
            }).then(response=>{
                layer.msg(response.data.msg);
            }).catch(error=>{
                layer.msg(error.message);
            })
        },
        initTree:function(){//初始化ztree
            //获取nodes
            axios({
                url:'manager/area/selectAll'
            }).then(response => {
                this.nodes = response.data;//   this.setNodes(.....)

                this.treeObj =   $.fn.zTree.init($("#treeMenu"),this.setting,this.nodes);

                // console.log(this.treeObj.getNodes())  ;//多维数组  需要递归遍历
                // console.log(this.treeObj.transformToArray(this.treeObj.getNodes()));//简单数组模式
            }).catch(function (error) {
                layer.msg(error.message);
            })
        },
        onClick:function(event, treeId, treeNode){
            this.params.aid=treeNode.id;
            this.params.areaName='';
            this.selectAll(1, this.pageInfo.pageSize)
            // console.log(11)
        },
        beforeEditName:function (treeId, treeNode) {//结合开启修改节点按钮、点击修改按钮事件回调处理更新节点弹框
            // this.toUpdate(treeNode.id);
            console.log("toUpdate......")
            return false;//阻止进入修改节点状态
        },
        addHoverDom:function (treeId,treeNode) {
            let aObj = $("#" + treeNode.tId + "_a");
            if ($("#treeMenu_"+treeNode.id+"_add").length>0) return;
            //<span class="button edit" id="treeMenu_3_edit" title="rename" treenode_edit="" style=""></span>
            let editStr = `<span class="button add" id="treeMenu_${treeNode.id}_add" title="add"  style=""></span>`;
            aObj.append(editStr);
            let span = $("#treeMenu_"+treeNode.id+"_add");
            if (span) span.bind("click", function(){alert("diy Button for " + treeNode.name);});
        },
        removeHoverDom:function (treeId,treeNode) {
            $("#treeMenu_"+treeNode.id+"_add").unbind().remove();
        }
    },
    created: function () {
        this.selectAll(1, this.pageInfo.pageSize);
    },
    mounted:function(){
        this.initTree();
    }

});